<template>
  <div>
    <h4 class="price-title-panle" @tap="switchCarSerise">
        <div class="sort-row J_priceSortBtn" >                                          
            <span>{{carSeriseText}}&nbsp;<span class="icon-xiajiantou" style="font-size:8px;color:#999999;"></span></span>
        </div>
        <span style="font-size:14px;margin-left:8px;margin-bottom:0px;">全部型号</span>
    </h4>
    <dl class="price-list-panle new-list" v-show="carSeriseStatus">
      <dt>
          <ul>
           <!--  <li>序号</li> -->
            <li style="width:70%;text-align:left;padding-left:19px;margin-top:3px">型号</li>
            <li style="width:30%;text-align:right;padding-right: 1.2rem;margin-top:3px">指导价</li>
          </ul>
      </dt>
      <div style="clear:both"></div>
      <div style="display:none">{{text}}</div>
      <!-- <dd v-if="prices.length==0">
            <div style="text-align:center;padding:3px 0px 3px 0px;">正在询价，请耐心等待</div>
      </dd>     -->
    </dl>
    <div class="pop-series" v-show="carSeriseStatus">
      <dl >
        <dd v-for="(v,i) in allcarModelMsg.cars" :class="checkActive(v.id)? 'series-active':''">
          <div @tap="gotoModelOffer(v.carSriesId,v.id)">
              <!-- <span style="width:33.33%;text-align:center">{{i+1}}</span> -->
              <span style="width:70%;text-align:left;padding-left:5px;">{{v.name}}</span>
              <span style="width:30%;text-align:right;padding-right: 0.9rem;">
                <em>{{v.guidePrice}}</em>万
              </span>
          </div>
        </dd>
      </dl>
    </div>
    <!-- 价格走势 -->
    <blEcharts v-if="blEchartsStatus"></blEcharts>
    <!-- 其他车系 -->
    <otherCarSeries v-if="otherCarSeriesStatus"></otherCarSeries>
    <!-- 相关推荐 -->
    <referrals v-if="referralsStatus"></referrals>
  </div>
</template>
<script>
  import mui from "static/js/mui";
  import {mapGetters} from 'vuex'
  import referrals from "@/components/base/referrals/referrals"
  import otherCarSeries from "@/components/base/referrals/otherCarSeries"
  import blEcharts from "@/components/base/echarts/blEcharts"
  export default {
    data() {
      return {
        referralsStatus:true,
        otherCarSeriesStatus:true,
        blEchartsStatus: true,
        text:'',
        carSeriseText: '展开',
        carSeriseStatus: false,
        cars:[],
        obj:{
          carSeriesId:"",
          carId:"",
          customerId:this.$store.getters.user.id
        }
      };
    },
    props: {},
    watch: {},
    methods: {
      back() {
        this.$router.push({
          path: "/index"
        });
      }, 
      // 传参跳转到详情页面
      gotoModelOffer(carSeriesId,carId){
        this.obj.carSeriesId=carSeriesId
        this.obj.carId=carId
        this.text = carId
    
        // //console.log(this.obj)
        this.$store.dispatch('updateIsAuth', true)
        this.$store.dispatch('showCarDetails',this.obj)
        mui('.mui-scroll-wrapper').scroll().scrollTo(0,0,100);
       
        this.carSeriseStatus = !this.carSeriseStatus
        this.referralsStatus = false
        this.otherCarSeriesStatus = false
        this.blEchartsStatus = false
        this.$nextTick(() => {
          this.referralsStatus = true
          this.otherCarSeriesStatus = true
          this.blEchartsStatus = true
        })
        /* this.$router.push({
           path: "/modelsOffer",
        });    */
      },
      switchCarSerise(){
        if(!this.carSeriseStatus) {
          this.carSeriseText = '展开'
        }else{
          this.carSeriseText = '关闭'
        }
        this.carSeriseStatus = !this.carSeriseStatus
      },
      checkActive(id){
        if(this.text == id){
          return true
        }
        return false
      }
    },
    filters: {},
    computed:{
        ...mapGetters([
            'allcarModelMsg',
        ])
    },
    components:{referrals, otherCarSeries, blEcharts},
    created() {
    },
    mounted() {
		
		}
  };

</script>

<style scoped>
  .mui-bar-nav ~ .mui-content {
      padding-top:0px;
  }
  .pop-series{
    background: #fff;
  }
  .pop-series dt {
      position: relative;
      background-color: #f7f7f7;
      padding: .4rem;
      color: #ff3034;
  }
  .pop-series dt:before {
    bottom: 0;
    content: "";
    background-color: #e5e5e5;
    height: 1px;
    position: absolute;
    left: 0;
    right: 0;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
  }
  .pop-series dd  {
    display: block;
    padding: .5rem .4rem;
    position: relative;
    color: #2b2b2b;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  } 
  .pop-series dd:before {
    bottom: 0;
    content: "";
    background-color: #e5e5e5;
    height: 1px;
    position: absolute;
    left: 0;
    right: 0;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
  }

  .pop-series dd  span {
    text-align:center;
    display: inline-block;
  }

  .pop-series dd  em {
    color: #ff3034;
  }

/* title */
.price-title-panle {
  font-size: 0.8rem;
  font-weight: 400;
  padding: 0.5rem 0 0.5rem 0.5rem;
  color: #1a1a1a;
  background: #fff;
}

.price-title-panle .sort-row {
  float: right;
  position: relative;
  margin-right: 0.8rem;
  font-size: 0.7rem;
  z-index: 3;
  cursor: pointer;
}

.price-title-panle .sort-row span {
  position: relative;
  color: #2b2b2b;
}

.price-title-panle .sort-row ul {
  position: absolute;
  left: 50%;
  top: 1.3rem;
  margin-left: -4rem;
  width: 6.15rem;
  border-radius: 0.1rem;
  background-color: #fff;
  box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.2);
  display: none;
}

.price-title-panle .sort-row li {
  position: relative;
}

.price-title-panle .sort-row li:before {
  bottom: 0;
  content: "";
  background-color: #e5e5e5;
  height: 1px;
  position: absolute;
  left: 0;
  right: 0;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

.price-title-panle .sort-row li a {
  display: block;
  line-height: 1.8rem;
  padding-left: 0.45rem;
}

.price-title-panle .sort-row li a.selected {
  position: relative;
  color: #dc181c;
}

.price-title-panle .sort-row.sort-hover span {
  color: #dc181c;
}

.price-title-panle .sort-row.sort-hover span:after {
  border-top-color: #dc181c;
}

.price-title-panle .sort-row.sort-hover ul {
  display: block;
}
.new-list ul li {
  float:left;
  text-align: center;
}
h4{
  margin-top:10px;
  margin-bottom: 0px;
}
.series-active{
  background:#dddddd;
}
</style>
